<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>滴答办公系统-修改头像</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="media/layui/css/layui.css" media="all">
    <script type="text/javascript" src="media/js/jquery.min.js"></script>
  </head>
  <body>
    <div class="layui-container" style="margin-top: 5px">
      <form class="layui-form" action="studentadd.do" method="post">
        <div class="layui-form-item">
          <label class="layui-form-label">头像</label>
          <div class="layui-input-block">
            <div class="layui-form-mid layui-word-aux">
              <img id="photo" src="media/images/logo.png" style="width: 60%;" />
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选择文件</label>
          <div class="layui-input-block">
            <input type="file" name="mFile" id="file" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <input class="layui-btn" style="margin-left: 10%" id="btn1" onclick="modUserPhoto()" value="确认导入">
        </div>
      </form>
    </div>


    <script src="media/layui/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
      var form;
      layui.use(
        ['form', 'upload', 'layedit', 'laydate'],
        function() {
          form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;
          var upload = layui.upload;
          //日期
          laydate.render({
            elem: '#date1'
          });
          laydate.render({
            elem: '#date2'
          });
        });
        
        function getQueryVariable(variable) {
          var query = window.location.search.substring(1);
          var vars = query.split("&");
          for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
              return pair[1];
            }
          }
          return (false);
        }
        
        function init() {
          var photo = getQueryVariable("photo");
          var imgSrc = "/emp/upload/userHeadPhoto/" + photo;
          $("#photo").attr('src', imgSrc);
        }
        
        init();
        
        function modUserPhoto() {
          var photo = $('#file')[0].files[0];
          
          if(typeof(photo) != "undefined") {
            var formData = new FormData();
            formData.append("id", getQueryVariable("id"));
            formData.append("photo", photo);
            
            $.ajax({
              url: "/emp/emp/modEmpPhoto",
              type: "POST",
              dataType: "json",
              processData : false, // 使数据不做处理
              contentType : false, // 不要设置Content-Type请求头
              data: formData,
              success: function(data) {
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
                window.parent.location.reload();
              },
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
              }
            });
          }else{
            alert("请选择图片文件！");
          }
        }
    </script>
  </body>
</html>
